Braid Plot

</div>

<div class="tab-pane card-body fade" id="structure" role="tabpanel">
                            <div><input type="checkbox" id="show_all_zero" value="show_all_zero" checked><label> Show Genes for which all samples have 0.</label></div>

<br>
                            <div id="values">
                                <label>Show Gene Values of</label>
                                <div class="form-check"><input class="form-check-input" type="radio" name="values" value="counts" checked> Normalized Counts</div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="values" value="z_stddev"> Z-Scores (Standard Deviations)</div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="values" value="z_mad"> Z-Scores (Mean Absolute Deviation)</div>
                            </div>

<br>
                            <div id="sorting">
                                <label>Sort Genes by</label>
                                <div class="form-check"><input class="form-check-input" type="radio" name="sorting" value="complete" checked> Complete Linkage Hierarchical Clustering</div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="sorting" value="pc1"> Principal Component 1 of genes in sample space</div>
                            </div>
                        </div>

<div><input type="checkbox" id="show_points" value="show_points" checked><label> Show Points </label></div>

<br>
                            <div>
                                <label for="radius">Diameter</label>
                                <input type="range" id="radius" name="" min="2" max="20" step="0.1" value="2" style="position: relative; top: 3px;">
                            </div>

<br>
                            <div id="point_coloring_system">
                                <label>Color points</label>
                                <div class="form-check"><input class="form-check-input" type="radio" name="point_coloring_system" value="unform"> Uniformly <input type="color" value="#333333" id="default_point_color"></div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="point_coloring_system" value="identity" checked> by Identity</div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="point_coloring_system" value="class"> by <select class="category"></select></div>
                            </div>

<hr>
                            <div><input type="checkbox" id="show_lines" value="show_lines" checked><label> Show Lines </label></div>
                            <div><input type="checkbox" id="show_halos" value="show_halos" checked><label> Show Halos </label></div>

<br>
                            <div id="curve">
                                <label>Interpolate points by</label>
                                <div class="form-check"><input class="form-check-input" type="radio" name="curve" value="linear" checked> Straight Lines</div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="curve" value="natural"> Natural Curve</div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="curve" value="catmull"> CatmullRom Curve</div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="curve" value="monotone"> MonotoneY Curve</div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="curve" value="cardinal"> Cardinal Curve</div>
                            </div>

<br>
                            <div id="line_coloring_system">
                                <label>Color lines</label>
                                <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="unform"> Uniformly <input type="color" value="#333333" id="default_line_color"></div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="identity" checked> by Identity</div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="class"> by <select class="category"></select></div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="z_stddev"> by Z-Score (stddev) on a single gene...</div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="z_mad"> by Z-Score (MAD) on a single gene...</div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="line_coloring_system" value="pc1"> by Principal Component 1 of samples in gene space...</div>
                            </div>

...along <input type="color" value="#0000cc" id="negative_color"> <input type="color" value="#c0c0c0" id="middle_color"> <input type="color" value="#cc0000" id="positive_color">

<br>
                            <br>
                            <div>
                                <label for="halo_opacity">Halo Opacity</label>
                                <input type="range" id="halo_opacity" name="" min="0" max="1" step="0.01" value="0.2" style="position: relative; top: 3px;">
                            </div>

</div>

</div>
                </div>
            </div>
        </div>
    </div>

class_categories = _.uniq(_.flatten(Object.values(classes).map(obj => Object.keys(obj))));
if (class_categories.length === 0) { $(".form-check-input[value='class']").remove(); }
else {
    class_categories.forEach(function(key) {
        $(".category").append($("<option></option>").attr("value", key.toString().replace(/\W/g,'')).text(key.toString()));
    });
}

braid = Braid(human, gene_sets, classes);

/////////////////////////////////////////////////////////////////////////////
             ///////    Select Gene Set / Thresholds   ///////
/////////////////////////////////////////////////////////////////////////////

var chooseGeneSet = document.getElementById("chooseGeneSet");
var chooseGeneSetform = new Awesomplete(chooseGeneSet, {
    list: Object.entries(gene_sets),
    maxItems: 30,
    replace: function (text) { this.input.value = text.label; }
});

var chooseGenes = document.getElementById("chooseGenes");

chooseGeneSet.addEventListener('awesomplete-selectcomplete', function(e) {
    selected_gene_set_name = e.text.label;
    selected_genes = e.text.value;
    chooseGenes.value = selected_genes;
    braid.restart({'selected_gene_set_name':selected_gene_set_name, 'selected_genes':selected_genes});
});

/////////////////////////////////////////////////////////////////////////////
                 ///////    Style Figure    ///////
/////////////////////////////////////////////////////////////////////////////

$("#values input:radio").change(                function () { braid.order({'values_': this.value}) });
$("#sorting input:radio").change(               function () { braid.order({'sorting_': this.value}) });
$("#show_all_zero").change(                     function () { braid.order({'show_all_zero_': this .checked}) });

$("#show_points").change(                       function () { braid.style({'show_points_': this.checked}) });
$("#radius").change(                            function () { braid.style({'point_radius_': parseFloat(this.value)}) });
$("#point_coloring_system input:radio").change( function () { braid.style({'point_coloring_system_': this.value}) });
$("#point_coloring_system .category").change(   function () { braid.style({'points_color_by_': this.value}) });
$("#default_point_color").change(               function () { braid.style({'default_point_color_': this.value}) });

$("#show_lines").change(                        function () { braid.style({'show_lines_': this.checked}) });
$("#show_halos").change(                        function () { braid.style({'show_halos_': this.checked}) });
$("#curve input:radio").change(                 function () { braid.style({'curve_': this.value}) });
$("#line_coloring_system input:radio").change(  function () { braid.style({'line_coloring_system_': this.value}) });
$("#line_coloring_system .category").change(    function () { braid.style({'lines_color_by_': this.value}) });
$("#default_line_color").change(                function () { braid.style({'default_line_color_': this.value}) });
$("#negative_color").change(                    function () { braid.style({'negative_color_': this.value}) });
$("#middle_color").change(                      function () { braid.style({'middle_color_': this.value}) });
$("#positive_color").change(                    function () { braid.style({'positive_color_': this.value}) });
$("#halo_opacity").change(                      function () { braid.style({'halo_opacity_': parseFloat(this.value)}) });

/////////////////////////////////////////////////////////////////////////////
                 ///////    Download SVG    ///////
/////////////////////////////////////////////////////////////////////////////

d3.select("#download").on("click", function() {

d3.select(this)
      .attr("href", 'data:application/octet-stream;base64,' + btoa(unescape(encodeURIComponent(d3.select("#graph-container").html()))))
      .attr("download", "plot.svg")
})

$('#hide-show').click(function(e) { $('.go-picker').toggleClass('hidden'); });

</script>

</body>

</html>